<!--
 * @Author: your name
 * @Date: 2021-08-20 20:44:40
 * @LastEditTime: 2021-08-26 10:58:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /web-blog/src/components/leftSidebar/leftSidebar.vue
-->
<template>
  <div class="leftBox">
    <a-card class="box-card">
      <div class="flex">
        <a-avatar :size="64" src="https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png" />
        <div class="aboutContent">
          <div>前端客栈</div>
          <div class="titleColor">技术博主</div>
        </div>
      </div>

      <div class="iconFlex">
        <div class="icon">
          <a-popover>
            <template slot="content">
              <img src="../../assets/img/WechatIMG3.jpeg" class="img"/>
            </template>
            <i class="iconfont icon-QQqun"></i>
          </a-popover>
        </div>
        <div class="icon">
          <a-popover>
            <template slot="content">
              <img src="../../assets/img/WechatIMG3.jpeg" class="img"/>
            </template>
            <i class="iconfont icon-0AB919"></i>
          </a-popover>
        </div>
        <div class="icon">
          <a href="https://gitee.com/woaink">
            <i class="iconfont icon-huaban88"></i>
          </a>
        </div>
        <div class="icon">
          <a-popover>
            <template slot="content">
              <img src="../../assets/img/gh_47560f107cb1_258.jpeg" class="img"/>
            </template>
            <i class="iconfont icon-xiaochengxu"></i>
          </a-popover>
        </div>
      </div>

      <div class="labelBox">
        <div class="box">
          <div class="number">6</div>
          <div class="title">文章</div>
        </div>

        <div class="box">
          <div class="number">6</div>
          <div class="title">获赞</div>
        </div>

        <div class="box">
          <div class="number">6</div>
          <div class="title">访问</div>
        </div>

      </div>
      <div class="echartTitle">一周访问量</div>
      <div id="myChart" class="echart"></div>
    </a-card>
  </div>
</template>

<script>

export default {
  data() {
    return {

    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          backgroundColor: '#080b30',
            title: {
                show: false,
                text: '多线图',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 20,
                },
                top: '5%',
                left: 'center',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)'
                            }],
                            global: false
                        }
                    },
                },
            },
            grid: {
                top: '5%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true
                },
                splitArea: {
                    // show: true,
                    color: '#f00',
                    lineStyle: {
                        color: '#f00'
                    },
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: [1,2,3,4,5,6],

            }],

            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                      color: ['#fff'],
                      opacity: 0.06
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                  color: '#fff',
                    show: true,
                    margin: 20,
                    textStyle: {
                      fontSize: 10,
                      // color: 'rgba(255,255,255,0.5)'
                    }
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                    name: '访问总量',
                    type: 'line',
                    smooth: true, //是否平滑
                    showAllSymbol: true,
                    // symbol: 'image://./static/images/guang-circle.png',
                    symbol: 'circle',
                    symbolSize: 10,
                    lineStyle: {
                        normal: {
                            color: "#FFBC0D",
                            shadowColor: 'rgba(0, 0, 0, 0)',
                            shadowBlur: 0,
                            shadowOffsetY: 5,
                            shadowOffsetX: 5,
                        },
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'rgb(218 255 232)',
                            fontSize: 10
                        }
                    },
                    itemStyle: {
                        color: "#FFBC0D",
                        borderColor: "rgb(108,78,0)",
                        borderWidth: 5,
                        shadowColor: 'rgba(0, 0, 0, 0)',
                        shadowBlur: 0,
                        shadowOffsetY: 2,
                        shadowOffsetX: 2,
                    },
                    tooltip: {
                        show: false
                    },
                    areaStyle: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0,
                            color: 'rgba(255,188,13, 0.4)'
                          },
                          {
                            offset: 1,
                            color: 'rgba(255,188,13, 0)'
                          }
                        ],
                        global: false // 缺省为 false
                      }
                    },
                    data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
                }
            ]
        });
    }
  }
}
</script>

<style lang="less" scoped>
  .leftBox {
    // margin-left: 50px;
    margin-right: 40px;
    // background: #DCDCDC;
  }

  .box-card {
    width: 300px;
    height: 383px;
    border-radius: 15px;
  }

  .flex {
    display: flex;
  }

  .titleColor {
    color: #999;
    font-size: 12px;
  }

  .aboutContent {
    margin-left: 20px;
    margin-top: 13px;
  }

  .iconFlex {
    display: flex;
    margin-left: 42px;
    margin-top: 10px;
  }

  .icon {
    margin-right: 30px;
  }

  .labelBox {
    border-top: 1px solid #f5f5f5;
    margin-top: 6px;
    margin-left: 30px;
    display: flex;
  }

  .box {
    margin-right: 30px;
    margin-top: 10px;
    text-align: center;
  }

  .title {
    color: #989998;
  }

  .echart {
    width: 260px;
    height: 150px;
    margin-top: 10px;
  }

  .echartTitle {
    font-size: 10px;
    margin-top: 10px;
    color: #999;
  }

  .img {
    width: 150px;
    height: 150px;
  }
</style>

 